<template>
	<view style="padding: 50rpx 10rpx;">
		<view class="collect_box">
			<view class="title">科技项目征集列表</view>
			<view class="list_box">
				<view class="list_item" :class="!item.flag&&'mask'" v-for="(item, index) in projectList" :key="index" @click="onClick(item)" :style="'background-color:' + item.bgcolor">
					<view style="height: 150rpx; text-align: center; line-height: 150rpx; color: #fff">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="title">科创基金征集列表</view>
			<view class="list_box">
				<view class="list_item" :class="!item.flag&&'mask'" v-for="(item, index) in fundList" :key="index" @click="onClick(item)" :style="'background-color:' + item.bgcolor">
					<view style="height: 150rpx; text-align: center; line-height: 150rpx; color: #fff">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getHistory } from "@/api/history.js";
export default {
	components: {},
	data() {
		return {
			projectList:[],
			fundList:[],
			colors:['cadetblue','darksalmon','darksalmon','cadetblue']
		};
	},
	onLoad() {},
	created() {
		this.getHistoryList()
	},
	methods: {
		async getHistoryList(){
			const data = {
				type:3
			}
			const res = await getHistory(data)
			this.projectList = res.data.filter(item=>item.subType==='1')
			this.projectList.forEach((item,index)=>{
				const colorIndex = index % this.colors.length
				this.projectList[index].bgcolor = this.colors[colorIndex]
				this.projectList[index].flag = new Date()<new Date(item.endDate)?true:false
			})
			this.fundList = res.data.filter(item=>item.subType==='2')
			this.fundList.forEach((item,index)=>{
				const colorIndex = index % this.colors.length
				this.fundList[index].bgcolor = this.colors[colorIndex]
				this.fundList[index].flag = new Date()<new Date(item.endDate)?true:false
			})
		},
		onClick(item) {
			if(item.flag){
				if(item.subType==='1'){
					uni.navigateTo({
						url:'/subpages/pages/serviceReport/kjxmReport/kjxm?id='+item.id
					})
				}else if(item.subType==='2'){
					uni.navigateTo({
						url:'/subpages/pages/serviceReport/kjxmReport/kcjj?id='+item.id
					})
				}
			}else{
				// console.log('不能申报');
				this.commonService()
			}
		},
		commonService() {
			uni.showModal({
				title: '温馨提示',
				content: '此申报已结束',
				confirmText: '我知道了', // 确认按钮的文字
				showCancel: false, // 是否显示取消按钮，默认为 true
				confirmColor: '#007aff',
				success: (res) => {
					if (res.confirm) {
						// console.log('comfirm') //点击确定之后执行的代码
					} else {
						// console.log('cancel') //点击取消之后执行的代码
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.collect_box {
	.title {
		font-weight: 700;
		font-size: 36rpx;
		color: #333;
		line-height: 50rpx;
		text-align: center;
	}
	.list_box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.list_item{
			border-radius: 10rpx;
			overflow: hidden;
			margin: 10rpx 0;
			width: 48%;
			&.mask{
				position: relative;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(50, 50, 50, 0.5);
				}
			}
		}
	}
}
</style>
